'use strict';
import React from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    StyleSheet,
    Image,
} from 'react-native';
import Global from '../Commom/GlobalConst';
import WebContainer from "../Components/WebContainer";
const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        alignItems: 'center',
        borderColor: '#F2F3F5',
        borderBottomWidth: 1,
    },
    content: {
        borderColor: '#F2F3F5',
        borderTopWidth: 1,
        padding: 10,
        paddingLeft: 15,
        paddingRight: 15,
    },
    textBox: {
        fontSize: 14,
        lineHeight: 25,
        color: Global.FontColor.DarkGray,
    },
    textBtn: {
        color: '#38D68B',
        fontSize: 16
    }
});

class IntroduceView extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            height: 100
        }
    }

    render() {
        let text = this.props.introText;
        if (!text) {
            return <View/>
        }
        var html = '<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"></head><body><div style="padding: 8px;">' + text + '</div></body></html>';
        return (
            <View style={{  backgroundColor: 'white', borderColor: '#F2F3F5',
                borderBottomWidth: 1,}}>
                <View style={{  borderColor: '#F2F3F5',
                    borderTopWidth: 1,height:this.state.height===100?this.state.height:null}}>
                    <WebContainer html={html} />
                </View>
                <TouchableOpacity onPress={() => {
                    this.setState({
                        height: this.state.height===null ? 100 : null
                    })
                }}>
                    <View style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        justifyContent: 'center',
                        padding: 10,
                        borderColor: '#F2F3F5',
                        borderTopWidth: 1,
                        width: Global.Const.size.width,
                        backgroundColor:'white'
                    }}>
                        <Text style={styles.textBtn}>
                            查看全部
                        </Text>
                        <Image style={{width: 12, height: 12, marginLeft: 5, resizeMode: 'contain'}}
                               source={ this.state.height===100?require('../../Image/up_icon.png'):require('../../Image/down_icon.png')}
                        />
                    </View>
                </TouchableOpacity>
            </View>
        )
    }
}

export default IntroduceView;